iT邦幫忙

2024 iThome 鐵人賽

DAY 2
0

昨天有說到HTML是由使用標籤來描述網頁內容的結構和格式,所以今天我要來學習標籤裡面的元素及屬性。

元素(Element):被開始標籤和結束標籤框起來範圍就是元素,標籤用尖括號包裹,且結尾標籤前面有一個斜杠 /。
https://ithelp.ithome.com.tw/upload/images/20240915/20169395TobvHhnqvs.jpg
但某些元素不包含內容,因此不需要結尾標籤,這些元素被稱為“自閉合元素”。常見的自閉合元素包括:

  • .<img>:插入圖像。
  • .<br>:換行。
  • .<hr>:水平線。
    https://ithelp.ithome.com.tw/upload/images/20240915/20169395bzGHxkFokY.png

屬性(Attribute):是用來對元素進行各種設定,通常位於開頭標籤內,由屬性名稱和屬性值組成。屬性值需要用雙引號或單引號包裹。
https://ithelp.ithome.com.tw/upload/images/20240915/20169395ZhOEu8q0DQ.jpg

常見的屬性:

  • id:元素的唯一標識符。
  • class:用於分類元素,以便應用相同的樣式或行為。
  • href:定義超鏈接的目標 URL。
  • src:指定圖像的路徑。
  • alt:指定圖像的替代文本。
  • title:當鼠標懸停時顯示的輔助信息。

屬性的作用:

  • 定義元素的行為(如鏈接的目標、圖像的路徑)。
  • 為 CSS 或 JavaScript 提供目標選擇器(如 id 和 class)。
  • 提供額外信息(如 alt、title)。

實作:使用屬性標記文本和鏈接。
https://ithelp.ithome.com.tw/upload/images/20240915/20169395HF7Snd8vb0.png

網頁會呈現下圖:
https://ithelp.ithome.com.tw/upload/images/20240915/201693959Yhvwxskv4.png

結語:
今天我學習了 HTML 元素的基本語法和屬性的使用。能夠使用屬性來定義元素的行為,並為元素添加額外的功能信息。明天,我將開始文本格式化標籤,學習如何使用 HTML 來結構化和樣式化文本。


上一篇
DAY 1:HTML 簡介與基本結構
下一篇
DAY 3:文本格式化標籤
系列文
前端基礎:HTML 和 CSS 的 30 天學習之旅13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言